<script setup lang="ts">
import {computed, reactive, ref} from "vue";
import {PaginationProps} from "@arco-design/web-vue";
import {useRoute} from "vue-router";
import {allDataStore} from "../../../stores/data.ts";

const route = useRoute()
const dataStore = allDataStore();
const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    width: 60,
    fixed: 'left'
  },
  {
    title: '中药名',
    dataIndex: 'name',
    fixed: 'left',
    width: 120
  },
  {
    title: '拼音',
    dataIndex: 'spell',
    width: 120
  },
  {
    title: '英文名',
    dataIndex: 'englishName'
  },
  {
    title: '拉丁名',
    dataIndex: 'latinName'
  },
  {
    title: '分类',
    dataIndex: 'classify'
  },
  {
    title: '产地',
    dataIndex: 'placeOfOrigin',
    width: 280
  },
  {
    title: '性状',
    dataIndex: 'medicineCharacter'
  }, {
    title: '品质',
    dataIndex: 'quality',
    width: 280
  },{
    title: '性味',
    dataIndex: 'propertyAndFlavor',
    width: 200
  },{
    title: '功效',
    dataIndex: 'effect',
    width: 280
  },{
    title: '来源',
    dataIndex: 'source',
    width: 280
  },{
    title: '图片地址',
    dataIndex: 'imageAddress'
  },
];
const pagination: PaginationProps = reactive({
  total: computed(() => dataStore.medicinesRes.total),
  pageSize: computed(() => dataStore.medicinesRes.size),
  current: computed(() => dataStore.medicinesRes.current)
})
const medicines =  computed(() => dataStore.medicinesRes.records);
const isLoading = ref(false)
const handleChange = async (page) => {
  isLoading.value = true
  await dataStore.getMedicines(page, pagination.pageSize)
  isLoading.value = false
}

</script>

<template>
  <div id="admin-medicine">
    <a-button class="ml-2 mb-2" status="success" @click="update">
      <icon-plus/> 新增
    </a-button>
    <a-table :scroll="{x: 2000,y: '100%'}"
             :data="medicines"
             :filter-icon-align-left="true"
             @page-change="handleChange"
             table-layout-fixed
             :row-selection="{type: 'checkbox',showCheckedAll: true}"
             :pagination="pagination"
             stripe
             :loading="isLoading"
    >
      <template #columns>
        <a-table-column v-for="col in columns"
                        :title="col.title"
                        :data-index="col.dataIndex"
                        :width="col?.width"
                        :ellipsis="true"
                        :tooltip="true"
                        :fixed="col?.fixed"
        ></a-table-column>
        <a-table-column fixed="right" :width="200" title="操作">
          <template #cell="{ record }">
            <a-button class="ml-2 mr-8" status="success" @click="$modal.info({ title:'Name', content:record.name })">编辑</a-button>
            <a-button status="danger" @click="$modal.info({ title:'Name', content:record.name })">删除</a-button>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<style scoped>
#admin-medicine {
  height: 88vh;
}
</style>